<template>
  <div>
    <el-form :inline="true" :model="queryData" class="demo-form-inline">

      <el-form-item label="快递员ID">
        <el-input v-model="queryData.courierId" placeholder="快递员ID"/>
      </el-form-item>

      <el-form-item label="任务类型">
        <el-select v-model="queryData.taskType" placeholder="任务类型">
          <el-option label="请选择" value="null"/>
          <el-option label="取件任务" value="1"/>
          <el-option label="派件任务" value="2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="任务分配状态">
        <el-select v-model="queryData.assignedStatus" placeholder="任务分配状态">
          <el-option label="请选择" value="null">请选择</el-option>
          <el-option label="未分配" :value="1"/>
          <el-option label="已分配" :value="2"/>
          <el-option label="人工分配" :value="3"/>
        </el-select>
      </el-form-item>

      <el-form-item label="任务状态">
        <el-select v-model="queryData.status" placeholder="任务状态">
          <el-option label="请选择" value="null">请选择</el-option>
          <el-option label="待执行" :value="1"/>
          <el-option label="待确认" :value="3"/>
          <el-option label="已完成" :value="4"/>
          <el-option label="已取消" :value="5"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column
        fixed
        prop="orderId"
        label="订单编号"
        width="150"
      />
      <el-table-column
        label="任务类型"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.taskType == '1' ? '取件任务' : '派件任务' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="任务状态"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{
              scope.row.status == '1' ? '待执行' : scope.row.status == '2' ? '进行中' :
                scope.row.status == '3' ? '待确认' : scope.row.status == '4' ? '已完成' : '已取消'
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="signStatus"
        label="签收状态"
        width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.signStatus == '1'">已签收</span>
          <span v-else-if="scope.row.signStatus == '2'">已拒收</span>
          <span v-else>任务进行中</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="agencyName"
        label="网点"
        width="300"
      />
      <el-table-column
        prop="courierName"
        label="快递员"
        width="300"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          <div v-if="Number(scope.row.assignedStatus) === 3">
            <el-button type="text" size="small" @click="fenPei(scope.row)">人工分配</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>


    <!--    人工分配-->
    <a-modal v-model="visible" title="人工分配快递员:" @ok="handleOk" okText="确定" cancelText="取消" @cancel="globalUserData=[]">
      <a-select style="width: 100%" placeholder="请选择快递员" @change="handleChange" v-model="courierId">
        <a-select-option v-for="(item,index) in globalUserData" :key="index" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-modal>


    <div class="block">
      <el-pagination
        :current-page="Number(queryData.page)"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="Number(queryData.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(queryData.total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情 -->
    <div class="detail-form">
      <el-dialog title="查看取派单详情" :visible.sync="dialogFormVisible">
        <el-form
          :model="detail"
          label-position="right"
          :disabled="true"
          label-width="100px"
        >

          <el-row>
            <el-col :span="12">
              <el-form-item label="取派单编号" prop="id">
                <el-input v-model="detail.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderId">
                <el-input v-model="detail.orderId"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="任务类型">
                <el-input v-if="detail.taskType==1" value="取件任务"/>
                <el-input v-else value="派件任务"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务状态">
                <el-input v-if="detail.status==1" value="待执行"/>
                <el-input v-else-if="detail.status==2" value="进行中"/>
                <el-input v-else-if="detail.status==3" value="待确认"/>
                <el-input v-else-if="detail.status==4" value="已完成"/>
                <el-input v-else value="已取消"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="签收状态">
                <el-input v-if="Number(detail.signStatus)==1" value="已签收"/>
                <el-input v-else-if="Number(detail.signStatus)==2" value="拒收"/>
                <el-input v-else value="执行中"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="网点编号" prop="agencyId">
                <el-input v-model="detail.agencyId"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="快递员编号" prop="courierId">
                <el-input v-model="detail.courierId"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="detail.createTime"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="预计开始时间" prop="estimatedStartTime">
                <el-input v-model="detail.estimatedStartTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际开始时间" prop="actualStartTime">
                <el-input v-model="detail.actualStartTime"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="预计完成时间" prop="estimatedEendTime">
                <el-input v-model="detail.estimatedEendTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际完成时间" prop="actualEndTime">
                <el-input v-model="detail.actualEndTime"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="确认时间" prop="confirmTime">
                <el-input v-model="detail.confirmTime"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取消时间" prop="cancelTime">
                <el-input v-model="detail.cancelTime"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务分配状态">
                <el-input v-if="detail.assignedStatus==1" value="待分配"/>
                <el-input v-else-if="detail.assignedStatus==2" value="已分配"/>
                <el-input v-else value="待人工分配"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pickupDispatch from '../../api/work/pickupDispatch'

export default {
  data() {
    return {
      visible: false,
      queryData: {
        page: 1,
        pageSize: 10,
        total: 10,
        taskType: '',
        courierId: '',
        assignedStatus: '',
        status: ''
      },
      tableData: [],
      dialogFormVisible: false,
      detail: {},
      globalUserData: [],
      courierId: '',
      taskPickUpDispatchId: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
      this.globalUserData = []
      pickupDispatch.courierAssignment(this.taskPickUpDispatchId, this.courierId).then(data => {
        this.$message({
          type: 'success',
          message: data.message,
          showClose: true
        });
        this.init()
      }).catch(e => {

      })
    },
    onSubmit() {
      this.init()
    },
    handleClick(row) {
      this.detail = row
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      this.queryData.pageSize=val;
      this.init()
    },
    handleCurrentChange(val) {
      this.queryData.page=val;
      this.init()
    },
    init() {
      pickupDispatch
        .init(this.queryData)
        .then((data) => {
          console.log('data:', data)
          this.tableData = data.data.records
          this.queryData.total = data.data.total
          this.queryData.page = data.data.current
          this.queryData.pageSize = data.data.size
        }).catch((e) => {
      })
    },
    fenPei(row) {
      this.taskPickUpDispatchId = row.id
      pickupDispatch.findGlobalUserByCoreOrgId(row.agencyId).then(data => {
        this.globalUserData = data.data
        this.visible = true
      }).catch(e => {
      })
    }
  }
}
</script>

<style scoped>

</style>
